import React, { useState } from 'react'; // 导入React和useState
import { Tabs, Card } from 'antd'; // 导入Tabs和Card组件
import DepartmentManagement from '../components/DepartmentManagement'; // 部门管理组件
import PositionManagement from '../components/PositionManagement'; // 职位管理组件
import EmployeeManagement from '../components/EmployeeManagement'; // 员工管理组件

const { TabPane } = Tabs; // 获取Tabs的TabPane

const OrganizationManagement = () => { // 组织架构管理主组件
  // 当前激活的标签页key
  const [activeKey, setActiveKey] = useState('department'); // 默认显示部门管理

  // 标签页切换回调
  const handleTabChange = (key) => {
    setActiveKey(key); // 设置当前激活标签页
  };

  return (
    <Card style={{ margin: 24 }}> {/* 外层卡片容器 */}
      <Tabs activeKey={activeKey} onChange={handleTabChange}> {/* 标签页组件 */}
        <TabPane tab="部门管理" key="department"> {/* 部门管理标签页 */}
          <DepartmentManagement /> {/* 部门管理子组件 */}
        </TabPane>
        <TabPane tab="职位管理" key="position"> {/* 职位管理标签页 */}
          <PositionManagement /> {/* 职位管理子组件 */}
        </TabPane>
        <TabPane tab="员工管理" key="employee"> {/* 员工管理标签页 */}
          <EmployeeManagement /> {/* 员工管理子组件 */}
        </TabPane>
      </Tabs>
    </Card>
  );
};

export default OrganizationManagement; // 导出主组件 